<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS 项目预览汇总</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <header>
        <span>js_demo</span>
        <a href="https://github.com/hehe1111/js_demo">Github</a>
    </header>

    <section>
        <div class="inner-wrapper">
            <h1>极简 demo</h1>
            <ol>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/text-overflow-ellipsis.html" target="_blank">文本溢出省略</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js-scroll-back-to-top.html" target="_blank">JS 跳转到页面顶部</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/image-lazyload.html" target="_blank">图片懒加载 - 简单实现</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/data-lazyload.html" target="_blank">用懒加载模拟渲染大量数据但页面不能卡顿</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/type-something-out.html" target="_blank">逐个字符自动打印输出</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/form-demo/search-input-box.html" target="_blank">搜索框组件</a>
                </li>
            </ol>
        </div>
    </section>

    <section class="js-30">
        <div class="inner-wrapper">
            <h1>JS 30</h1>
            <ol>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/01%20-%20JavaScript%20Drum%20Kit/" target="_blank">JavaScript Drum Kit</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/02%20-%20JS%20+%20CSS%20Clock/" target="_blank">JS + CSS Clock</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/03%20-%20CSS%20Variables/" target="_blank">CSS Variables</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/04%20-%20Array%20Cardio%20Day%201/" target="_blank">Array Cardio Day 1</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/05%20-%20Flex%20Panel%20Gallery/" target="_blank">Flex Panel Gallery</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30//05%20-%20Flex%20Panel%20Gallery/version2.0/" target="_blank">Flex Panel Gallery - demo2.0 预览链接</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/06%20-%20Type%20Ahead/" target="_blank">Type Ahead</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/07%20-%20Array%20Cardio%20Day%202/" target="_blank">Array Cardio Day 2</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/08%20-%20Fun%20with%20HTML5%20Canvas/" target="_blank">Fun with HTML5 Canvas</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/09%20-%20Dev%20Tools%20Domination/" target="_blank">Dev Tools Domination</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/" target="_blank">Hold Shift and Check Checkboxes</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/11%20-%20Custom%20Video%20Player/" target="_blank">Custom Video Player</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/12%20-%20Key%20Sequence%20Detection/" target="_blank">Key Sequence Detection</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/13%20-%20Slide%20in%20on%20Scroll/" target="_blank">Slide in on Scroll</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/14%20-%20JavaScript%20References%20VS%20Copying/" target="_blank">JavaScript References VS Copying</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/15%20-%20LocalStorage/" target="_blank">LocalStorage</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/16%20-%20Mouse%20Move%20Shadow/" target="_blank">Mouse Move Shadow</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/17%20-%20Sort%20Without%20Articles/" target="_blank">Sort Without Articles</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/18%20-%20Adding%20Up%20Times%20With%20Reduce/" target="_blank">Adding Up Times With Reduce</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/19%20-%20Webcam%20Fun/" target="_blank">Webcam Fun</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/20%20-%20Speech%20Detection/" target="_blank">Speech Detection</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/21%20-%20Geolocation/" target="_blank">Geolocation</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/22%20-%20Follow%20Along%20Link%20Highlighter/" target="_blank">Follow Along Link Highlighter</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/23%20-%20Speech%20Synthesis/" target="_blank">Speech Synthesis</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/24%20-%20Sticky%20Nav/" target="_blank">Sticky Nav</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/25%20-%20Event%20Related/" target="_blank">Event Related</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/26%20-%20Strip%20Follow%20Along%20Nav/" target="_blank">Strip Follow Along Nav</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/27%20-%20Click%20and%20Drag/" target="_blank">Click and Drag</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/28%20-%20Video%20Speed%20Controller/" target="_blank">Video Speed Controller</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/29%20-%20Countdown%20Timer/" target="_blank">Countdown Timer</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/js30/30%20-%20Whack%20A%20Mole/" target="_blank">Whack A Mole</a>
                </li>
            </ol>
        </div>
    </section>

    <!-- <section class="ife">
        <div class="inner-wrapper">
            <h1>ife</h1>
            <ol>
                <li><a href="https://hehe1111.github.io/js_demo/ife/02/" target="_blank">02</a></li>
                <li><a href="https://hehe1111.github.io/js_demo/ife/01/" target="_blank">01</a></li>
                <li><a href="javascript:;">03</a></li>
                <li><a href="https://hehe1111.github.io/js_demo/ife/04/" target="_blank">04</a></li>
                <li><a href="https://hehe1111.github.io/js_demo/ife/05/" target="_blank">05</a></li>
            </ol>
        </div>
    </section> -->

    <section class="nav-kbd">
        <div class="inner-wrapper">
            <h1>nav-kbd</h1>
            <ol>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/nav-kbd/index.html" target="_blank">键盘导航</a>
                </li>
            </ol>
        </div>
    </section>

    <section class="canvas-demo">
        <div class="inner-wrapper">
            <h1>canvas-demo</h1>
            <ol>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/canvas-demo/using-div-as-canvas/index.html" target="_blank">using-div-as-canvas</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/canvas-demo/using-canvas-as-canvas/index.html" target="_blank">画板</a>
                </li>
            </ol>
        </div>
    </section>

    <section class="carousel-demo">
        <div class="inner-wrapper">
            <h1>carousel-demo</h1>
            <ol>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/carousel-demos/loop-carousel/" target="_blank">loop-carousel</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/carousel-demos/loop-carousel-2/" target="_blank">loop-carousel-2</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/carousel-demos/apple-like-carousel/" target="_blank">apple-like-carousel</a>
                </li>
            </ol>
        </div>
    </section>

    <section class="popover-demo">
        <div class="inner-wrapper">
            <h1>popover-demo</h1>
            <ol>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/popover-demo/index.html" target="_blank">点击别处关闭浮层</a>
                </li>
            </ol>
        </div>
    </section>

    <section class="visual-dom-event-model">
        <div class="inner-wrapper">
            <h1>visual-dom-event-model</h1>
            <ol>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/visual-dom-event-model/bubble.html" target="_blank">冒泡模型</a>
                </li>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/visual-dom-event-model/capture-bubble.html" target="_blank">捕获与冒泡模型</a>
                </li>
            </ol>
        </div>
    </section>

    <section class="animation-resume">
        <div class="inner-wrapper">
            <h1>animation-resume</h1>
            <ol>
                <li>
                    <a href="https://hehe1111.github.io/js_demo/animation-resume/index.html" target="_blank">会动的简历</a>
                </li>
            </ol>
        </div>
    </section>

    <footer>
        <p>Happy Coding:)</p>
    </footer>

</body>

</html>
